<!--
 * @Description: 社群分析
 * @Author: py
 * @Date: 2024-11-04
-->
<script setup lang='ts'>
import type { EChartsOption } from 'echarts'

import { useLine } from '@fl/api/data-analysis'
import { Echart } from '@fl/origin-components/Echart'
import * as echarts from 'echarts/core'
import { set } from 'lodash-es'

import type { DateRange } from '../types'

const oDateRange = inject<Ref<DateRange>>('dateRange')
if (!oDateRange) {
    throw new Error('dateRange is not provided by an ancestor component.')
}

const chartOptions = reactive({
    grid: {
        bottom: 12,
        containLabel: true,
        left: 0,
        right: 0,
        top: 55,
    },
    legend: {
        itemGap: 20,
        itemHeight: 8,
        itemWidth: 8,
        left: 'center',
        padding: 0,
        textStyle: {
            color: '#86909c',
            fontSize: 12,
            lineHeight: 12,
        },
        top: 30,
    },
    series: [
        {
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        color: '#5b8ff9',
                        offset: 0,
                    },
                    {
                        color: '#fff',
                        offset: 1,
                    },
                ]),
                opacity: 0.25,
            },
            data: [],
            emphasis: {
                focus: 'series',
            },
            lineStyle: {
                color: 'rgba(91,143,249,0.65)',
            },
            name: '买房',
            showSymbol: false,
            smooth: true,
            type: 'line',
        },
        {
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        color: '#77ff49',
                        offset: 0,
                    },
                    {
                        color: '#fff',
                        offset: 1,
                    },
                ]),
                opacity: 0.25,
            },
            data: [],
            emphasis: {
                focus: 'series',
            },
            lineStyle: {
                color: 'rgba(46,199,46,0.65)',
            },
            name: '租房',
            showSymbol: false,
            smooth: true,
            type: 'line',
        },
    ],
    tooltip: {
        // axisPointer: {
        //     type: 'cross',
        // },
        padding: [5, 10],
        trigger: 'axis',
    },
    xAxis: {
        axisLabel: {
            align: 'center',
            alignMaxLabel: 'right',
            alignMinLabel: 'left',
            color: '#86909c',
            formatter(value) {
                const texts = value.split('-');
                texts.shift();
                return texts.join('-');
            },
        },
        axisLine: {
            lineStyle: {
                color: '#d9d9d9',
            },
        },
        boundaryGap: false,
        data: [],
        type: 'category',
    },
    yAxis: {
        axisLabel: {
            color: '#86909c',
        },
        type: 'value',
    },
}) as EChartsOption

const oParams = computed(() => {
    return {
        endTime: oDateRange.value.endTime,
        startTime: oDateRange.value.startTime,
        type: 2, // 2 社群分析 5 购房人来源分析 9 在线顾问数
    }
})

const { data: chartsData, isLoading: chartsLoading } = useLine(oParams)

watchEffect(() => {
    if (chartsData.value) {
        set(
            chartOptions,
            'xAxis.data',
            chartsData.value.xaxisData,
        )
        set(
            chartOptions,
            'series[0].data',
            chartsData.value.seriesData[0].data,
        )
        set(
            chartOptions,
            'series[1].data',
            chartsData.value.seriesData[1].data,
        )
    }
})
</script>

<template>
    <div class="pr-20">
        <h5 class="module-title">
            社群分析
        </h5>

        <div class="chart-container">
            <ElSkeleton :loading="chartsLoading"
                        animated
            >
                <Echart :options="chartOptions"
                        :height="375"
                />
            </ElSkeleton>
        </div>
    </div>
</template>

<style lang="less" scoped>
@import '../panel.less';

.chart-container {
    width: 100%;
}
</style>
